﻿@{
    ViewBag.Title = "MemoryUsage";
}
<h2>
    Machine Memory Usage Report</h2>
<fieldset>
    <legend>Filter</legend><span>Date</span><input type="text" id="date" />
    <span>Machine</span>@Html.DropDownList("Machines")
</fieldset>
<script type="text/javascript">
    $(function () {
        $("#date").datepicker(); ;
        $("#date").val(dateFormat(new Date(), "mm/dd/yyyy"));
        $("#date, #Machines").change(fillCharts);

        fillCharts();
    });

    function fillCharts() {
        var params = {
            machineId: $("#Machines").val(),
            date: dateFormat($("#date").datepicker("getDate"), "mm/dd/yyyy")
        };

        $.ajax({
            url: '@Url.Action("GenerateMemoryUsageReport", "Machine")',
            data: params,
            dataType: 'json',
            success: function (json) {

                if (json.noData == false) {
                    generateReport(json);
                } else {
                    //                    $("#periodSummaryChart")[0].innerHTML = "There's no information for the selected date";   
                    //                    $("#periodSummaryStatusChart")[0].innerHTML = "";
                }
            }
        });
    }

    function generateReport(json) {
        var chart = new Highcharts.Chart({
            chart: { renderTo: 'memoryUsageChart', className: 'chart', defaultSeriesType: 'line', marginBottom: 25, marginRight: 130 },
            legend: { enabled: false },
            //subtitle: { text: json.period },
            title: { text: 'RAM Usage', x: -20 },
            tooltip: { formatter: function () { return '<b>' + this.x + ':</b> RAM used average is ' + this.y + ' kb'; } },
            xAxis: { categories: json.categories },
            //xAxis: { categories: [''] },
            yAxis: { plotLines: [{ color: '#808080', value: 0, width: 1}], title: { text: 'Total Memory Usage (kb)'} },
            credits: { enabled: false }
        });

        chart.addSeries({
            name: json.series.Name,
            data: json.series.Data
        }, false);

        chart.redraw();
    }
</script>
<div id="memoryUsageChart">
</div>
